<template>
  <view class="order-layout">
    <my-header title="我的订单"></my-header>
    <my-content class="content">
      <view class="header">
        <view class="tab">
          <view
            @click="changeStatus(item.id)"
            class="tab_item"
            v-for="item in statusArr"
            :key="item.id"
            :class="status == item.id ? 'active' : ''"
          >
            <view class="tab_title">{{ item.title }}</view>
            <!-- <view class="tab_border"></view> -->
          </view>
        </view>
      </view>

      <scroll-view
        class="scroll"
        refresher-background=""
        :refresher-triggered="refreshStatus"
        @refresherrefresh="refresh"
        :refresher-enabled="true"
        scroll-y="true"
        @scrolltolower="lower"
      >
        <view class="order" v-if="orderData.length > 0 && resultStatus">
          <view
            class="order_item"
            @click="header(`/pages/order/detail?id=${item.id}`)"
            v-for="(item, index) in orderData"
            :key="item.id"
          >
            <view class="order_header">
              <view class="order_no">订单编号：{{ item.order_no }}</view>
              <!-- :style="{ color: item.status_color }" -->
              <view class="order_status">{{ item.status_str }}</view>
            </view>

            <view class="divider"></view>

            <view class="order_detail">
              <view class="order_detail_item" v-for="goods in item.order_detail" :key="goods.id">
                <view class="goods-img-bg">
                  <image mode="widthFix" class="goods_image" :src="goods.goods_image"></image>
                </view>
                <view class="goods_info">
                  <view class="goods_name">{{ goods.goods_name }}</view>
                  <view class="goods_attr" v-if="goods.attr_values">
                    <text class="goods_attr_value">{{ goods.attr_values }}</text>
                  </view>
                  <view class="goods_price">
                    <view class="price">
                      <view class="price_icon">￥</view>
                      <view>{{ goods.goods_price }}</view>
                    </view>
                    <view class="goods_num">x {{ goods.num }}</view>
                  </view>
                </view>
              </view>
            </view>
            <view class="divider"></view>
            <view class="bottom">
              <view class="total">
                <view class="total_title">
                  <text class="total_title_info">共{{ item.num }}件 |</text>
                  <text>合计：</text>
                </view>
                <view class="total_price">
                  <view class="price_icon">￥</view>
                  <view>{{ item.pay_amount }}</view>
                </view>
              </view>
              <view class="order_action">
                <view class="order_action_btn cancel" v-if="item.action.cancel_btn" @click.stop="cancel(item, index)">
                  取消订单
                </view>
                <view class="order_action_btn cancel" v-if="item.action.del_btn" @click.stop="del(item, index)">
                  删除订单
                </view>
                <view class="order_action_btn pay" v-if="item.action.pay_btn && !payed" @click.stop="pay(item)">
                  立即支付
                </view>
                <view class="order_action_btn pay" v-if="item.action.pay_btn && payed">立即支付</view>
                <view class="order_action_btn pay" v-if="item.action.receive_btn" @click.stop="express(item.id)">
                  查看物流
                </view>
                <view class="order_action_btn receive" v-if="item.action.receive_btn" @click.stop="receive(item.id)">
                  确认收货
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- <view v-if="orderData.length == 0 && resultStatus" class="order none">
          <image
            mode="widthFix"
            src="http://www.qixdian.cn/upload/20231012/652770e8f30b1.png"
            class="none_image"
          ></image>
          <view class="none_text">暂无订单</view>
        </view> -->
      </scroll-view>
    </my-content>

    <my-alert-dialog
      ref="alertDialog"
      title="提示"
      content="确定取消订单吗？"
      cancelString="暂不"
      @confirm="handleConfirm"
    ></my-alert-dialog>

    <my-alert-dialog ref="delDialog" title="提示" content="确定要删除订单嘛?" @confirm="handleDelOrder"></my-alert-dialog>
    <my-alert-dialog ref="receiveDialog" title="提示" content="确定收货嘛？" @confirm="handleReceiveDialog"></my-alert-dialog>
  </view>
</template>

<script>
import api from '../../api/index.js'
export default {
  data() {
    return {
      status: '',
      statusArr: [
        { id: 0, title: '全部' },
        { id: 1, title: '待付款' },
        { id: 2, title: '待发货' },
        { id: 3, title: '待收货' },
        { id: 4, title: '已完成' },
      ],
      page: 1,
      last_page: 1,
      orderData: [],
      resultStatus: false,
      refreshStatus: false,
      payed: false,
      top: 80,
    }
  },
  onLoad(option) {
    this.status = option.status || ''
    this.getOrders(1)
  },
  onShow() {
    this.payed = false
  },
  methods: {
    express(id) {
      this.header(`/pages/order/express?id=${id}`)
    },
    back() {
      this.header('/pages/user/index', 2)
    },
    lower() {
      if (this.page >= this.last_page) {
        this.show('没有更多数据了')
        return
      }
      this.page++
      this.getOrders(1)
    },
    refresh() {
      this.refreshStatus = true
      this.page = 1
      this.getOrders(2)
    },
    getOrders(type) {
      uni.showLoading({
        title: '数据加载中',
      })
      api.orders
        .index({ page: this.page, status: this.status })
        .then((res) => {
          if (res.code === 200) {
            this.resultStatus = true
            this.refreshStatus = false
            uni.hideLoading()
            this.last_page = res.data.last_page
            if (type == 1) {
              this.orderData = this.orderData.concat(res.data.data)
            } else {
              this.orderData = res.data.data
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    changeStatus(id) {
      if (this.status != id) {
        this.status = id
        this.resultStatus = false
        this.page = 1
        this.orderData = []
        this.getOrders(2)
      }
    },
    handleReceiveDialog(id) {
      api.orders
        .receive(id)
        .then((res) => {
          if (res.code === 200) {
            this.show('收货成功')
            this.refresh()
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    receive(id) {
      this.$refs.receiveDialog.show(id)
    },
    handleConfirm(item) {
      api.orders
        .cancel(item.id)
        .then((res) => {
          if (res.code === 200) {
            this.show('取消成功')
            this.refresh()
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    cancel(item, index) {
      this.$refs.alertDialog.show(item)

      /* uni.showModal({
        title: '提示',
        content: `确定取消订单吗？`,
        success: (result) => {
          if (result.confirm) {
            
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        },
      }) */
    },
    handleDelOrder(id) {
      api.orders
        .del(id)
        .then((res) => {
          if (res.code === 200) {
            this.show('删除成功')
            this.refresh()
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    del(item, index) {
     this.$refs.delDialog.show(item.id)
    },
    pay(item) {
      api.orders
        .edit(item.id)
        .then((res) => {
          if (res.code === 200) {
            // 微信支付
            if (item.pay_type == 1) {
              let pay_data = res.data.data
              uni.requestPayment({
                provider: 'wxpay',
                orderInfo: {
                  appid: pay_data.appid, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
                  noncestr: pay_data.noncestr, // 随机字符串
                  package: pay_data.package, // 固定值
                  partnerid: pay_data.partnerid, // 微信支付商户号
                  prepayid: pay_data.prepayid, // 统一下单订单号
                  timestamp: pay_data.timestamp, // 时间戳（单位：秒）
                  sign: pay_data.sign, // 签名，这里用的 MD5/RSA 签名
                },
                success: (res) => {
                  this.payed = false
                  this.refresh()
                },
                fail: (error) => {
                  this.payed = false
                  this.refresh()
                },
              })
            } else if (item.pay_type == 2) {
              let pay_data = res.data.data
              uni.requestPayment({
                provider: 'alipay',
                orderInfo: pay_data,
                success: (res) => {
                  this.payed = false
                  this.refresh()
                },
                fail: (error) => {
                  this.payed = false
                  this.refresh()
                },
              })
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.order-layout {
  background-color: #141414;
  height: 100vh;
}
.content {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .header {
    margin: 0 20rpx;
    .tab {
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* background-color: #fff; */

      width: 100%;
      height: 80rpx;
      .tab_item {
        font-size: 26rpx;
        color: #808080;
        width: 136rpx;
        height: 46rpx;
        line-height: 46rpx;
        text-align: center;

        .tab_border {
          width: 50rpx;
          height: 8rpx;
        }
        &.active {
          background-image: url('https://www.dingxians.cn/images/box/tab-bg-active.png');
          background-size: 100% 100%;
          .tab_border {
            // background-color: #3ee0d8;
            // color: #fff;
            /* background-color: #a361f6; */
          }
          .tab_title {
            color: #ded000;
            font-weight: bold;
          }
        }
      }
    }
  }

  .scroll {
    box-sizing: border-box;
    padding-top: 20rpx;
    flex: 1;
    /* position: fixed; */
    /* top: 230rpx; */
    margin: 0 auto;
    /*  overflow-y: scroll; */
    /* height: calc(100vh - 230rpx); */
    /* height: 100%; */
    &::-webkit-scrollbar {
      display: none;
    }
    overflow: hidden;
  }
  .order {
    display: flex;
    flex-direction: column;
    &.none {
      display: flex;
      justify-content: center;
      align-items: center;
      height: calc(100vh - 400rpx);
      .none_image {
        width: 200rpx;
      }
      .none_text {
        color: #999;
        font-size: 24rpx;
      }
    }
    .order_item {
      display: flex;
      flex-direction: column;
      border-radius: 10rpx;
      background-image: url('https://www.dingxians.cn/upload/user_static/box/bg-box-normal.png');
      background-size: 100% 100%;
      margin-bottom: 20rpx;
      width: 710rpx;
      margin: 0 auto 20rpx auto;
      /* padding: 0 30rpx; */
      box-sizing: border-box;
      padding: 0 20rpx;
      color: white;
      .order_header {
        display: flex;
        justify-content: space-between;
        height: 90rpx;
        line-height: 90rpx;
        font-size: 24rpx;
        opacity: 0.7;
        padding: 0 20rpx;

        .order_status {
          color: white;
          font-size: 30rpx;
          font-weight: bold;
          opacity: 0.7;
        }
      }

      .divider {
        width: 686rpx;
        height: 2rpx;
        background: linear-gradient(
          116deg,
          rgba(255, 255, 255, 0) 0%,
          #ffffff 48%,
          rgba(255, 255, 255, 0) 100%,
          #808080 100%
        );
        opacity: 0.16;
      }

      .order_detail {
        display: flex;
        flex-direction: column;
        /* padding: 30rpx 0; */
        max-height: 440rpx;
        overflow: scroll;
        .order_detail_item {
          display: flex;
          &:not(:last-child) {
            margin-bottom: 30rpx;
          }

          .goods-img-bg {
            background-image: url('https://www.dingxians.cn/upload/user_static/box/bg-goods-image-normal.png');
            background-size: 100% 100%;
            width: 200rpx;
            height: 200rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20rpx;
            .goods_image {
              width: 170rpx;
              height: 170rpx;
            }
            /* border: 1rpx solid #e7e7e7; */
          }
          .goods_info {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 40rpx 20rpx 40rpx 0;
            flex: 1;
            .goods_name {
              width: 100%;
              -webkit-line-clamp: 3;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              overflow: hidden;
              font-size: 28rpx;
            }
            .goods_attr {
              .goods_attr_value {
                font-size: 24rpx;
                background-color: rgba(255, 255, 255, 0.2);
                padding: 5rpx 10rpx;
                color: white;
                border-radius: 4rpx;
              }
            }

            .goods_price {
              display: flex;
              justify-content: space-between;
              align-items: baseline;
              .price {
                display: flex;
                align-items: baseline;
                color: #ded000;
                font-size: 30rpx;
                .price_icon,
                .price_dot,
                .price_float {
                  font-size: 24rpx;
                }
              }
            }
            .goods_num {
              color: white;
              font-size: 24rpx;
            }
          }
        }
      }

      .bottom {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 80rpx;
        padding-bottom: 20rpx;
        .total {
          display: flex;
          align-items: baseline;
          .total_title {
            display: flex;
            align-items: baseline;
            font-size: 24rpx;
            .total_title_info {
              color: white;
              margin-right: 10rpx;
            }
          }
          .total_price {
            display: flex;
            align-items: baseline;
            font-size: 40rpx;
            color: white;
            font-weight: bold;
            .price_icon,
            .price_dot,
            .price_float {
              font-size: 24rpx;
            }
          }
        }
        .order_action {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          margin: 10rpx 20rpx 10rpx 0;
          .order_action_btn {
            width: 120rpx;
            height: 40rpx;
            line-height: 40rpx;
            border-radius: 5rpx;
            font-size: 24rpx;
            margin-left: 20rpx;
            text-align: center;
            color: black;
            &.cancel {
              background-color: white;
              opacity: 0.6;
            }
            &.pay,
            &.receive {
              background-color: #ded000;
            }
            /* &.receive {
              background-color: #a361f6;
            } */
          }
        }
      }
    }
  }
}
</style>
